<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">
				{{deviceName != null ? deviceName : ""  }}
			</block>
		</cu-custom>

		<view id="fixedBlock" class="padding bg-white common-bar"
			>
			<view class="flex justify-around align-center">
				<picker mode="date" :value="startDate" :end="formatDate(initEndTimestamp)" @change='startDateChange'>
					<view class="text-grey text-sm">{{startDate}}</view>
				</picker>
				<!-- 至 -->
				<view class="text-sm">{{$t('to')}}</view>
				<picker mode="date" :end="formatDate(initEndTimestamp)" @change='endDateChange'>
					<view class="text-grey text-sm">{{endDate}}</view>
				</picker>
			</view>
		</view>
		<view class="common-bar-height"></view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="pageGetDeviceStatus">
			<view v-for="(arrItem,arrIndex) in deviceStatusList" :key="arrIndex" :style="(arrIndex == 0 ? style : '')">
				<view class="cu-timeline" v-for="(item,index) in arrItem" :key="index" @tap="gotoDevice(item)">
					<view class="cu-item cur cuIcon-order" v-if="item.status=='ONLINE'">
						<view class="margin-xs text-df">
							<text class="text-grey">{{item.deviceName}}</text>
							<text style="float: right;" class="text-green">{{item.deviceStatus}}</text>
						</view>
						<view class="content bg-olive light">
							<view class="text-grey text-df">{{item.deviceCore}}</view>
							<view class="text-sm margin-top-xs">{{item.timestamp}}</view>
						</view>
					</view>
					<view class="cu-item cuIcon-noticefill" v-if="item.status=='OFFLINE'">
						<view class="margin-xs text-df">
							<text  class="text-grey">{{item.deviceName}}</text>
							<text style="float: right;" class="text-gray">{{item.deviceStatus}}</text>
						</view>
						<view class="content bg-grey light">
							<view class="text-grey text-df">{{item.deviceCore}}</view>
							<view class="text-sm margin-top-xs">{{item.timestamp}}</view>
						</view>
					</view>

				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import {
		formatDeviceStatus
	} from '@/util/utils.js'
	import {formatDateTime,formatDate} from '@/util/formatTime.js'
	import * as iotDeviceStatusApi from '@/api/iot/iotDeviceStatusApi.js'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import * as storage from '@/util/storage.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					use: true,
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false,
					empty: {
						use: true,
						fixed: true,
						top: "20%"
					}
				},
				style: '',
				startDate: '',
				endDate: '',
				startTimestamp: '',
				endTimestamp: '',
				initEndTimestamp: '',
				initEndDate: '',
				deviceStatusList: [],
				deviceName: '',
				deviceCore: null,
				currentPage: 1,
				pageSize: 10,
				userId: storage.getUserId(),
				companyId: storage.getCompanyId(),
				deptId: storage.getDeptId(),
				websiteModel: storage.getWebsiteModel()
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.initOption = option
		},
		onShow() {
			this.init()
		},
		methods: {
			downCallback() {
				this.currentPage = 1
				this.deviceStatusList = []
				this.mescroll.resetUpScroll()
			},
			init() {
				this.deviceName = this.initOption.deviceName || null
				this.deviceCore = this.initOption.deviceCore || null
				this.initDate()
			},
			formatDate(timestamp){
				return formatDate(timestamp)
			},
			initDate() {
				let time = new Date()
				this.startTimestamp = Math.round(time.getTime() / 1000 - 3 * 24 * 60 * 60).toString()
				this.endTimestamp = Math.round(time.getTime() / 1000 + 1 * 10).toString()
				this.startDate = this.formatDate(this.startTimestamp)
				this.endDate = this.formatDate(this.endTimestamp)
				this.initEndTimestamp = this.endTimestamp
				this.pageGetDeviceStatus()
			},
			pageGetDeviceStatus() {
				let api
				if (this.deviceCore) {
					api = iotDeviceStatusApi.pageGetDeviceStatusByDevice({
						deviceCore: this.deviceCore,
						startDate: this.startTimestamp,
						endDate: this.endTimestamp,
						currentPage: this.currentPage,
						pageSize: this.pageSize,
					})
				} else {
					switch (this.websiteModel) {
						case 'system':
							api = iotDeviceStatusApi.pageGetDeviceStatusAll({
								startDate: this.startTimestamp,
								endDate: this.endTimestamp,
								currentPage: this.currentPage,
								pageSize: this.pageSize,
							})
							break
						case 'company':
							api = iotDeviceStatusApi.pageGetDeviceStatusByCompany({
								companyId: this.companyId,
								startDate: this.startTimestamp,
								endDate: this.endTimestamp,
								currentPage: this.currentPage,
								pageSize: this.pageSize,
							})
							break
						case 'dept':
							api = iotDeviceStatusApi.pageGetDeviceStatusByDept({
								deptId: this.deptId,
								startDate: this.startTimestamp,
								endDate: this.endTimestamp,
								currentPage: this.currentPage,
								pageSize: this.pageSize,
							})
							break
						default:
							api = iotDeviceStatusApi.pageGetDeviceStatusByUser({
								userId: this.userId,
								startDate: this.startTimestamp,
								endDate: this.endTimestamp,
								currentPage: this.currentPage,
								pageSize: this.pageSize,
							})
					}
				}



				api.then((res) => {
					if (res.data) {
						const {
							currentPage,
							data,
							total
						} = res.data
						for (let i = 0; i < data.length; i++) {
							data[i].deviceStatus = formatDeviceStatus(this, data[i].status)
							data[i].timestamp = formatDateTime(data[i].timestamp, this.$t('unKnow'))
						}
						this.mescroll.endByPage(data.length, total)
						const deviceStatusIndex = currentPage - 1
						this.$set(this.deviceStatusList, deviceStatusIndex, data)
						this.currentPage = currentPage + 1
					}
				})
			},
			startDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/');
				const timestamp = (new Date(date).getTime() / 1000).toString();
				const endTimestamp = this.endTimestamp
				if (endTimestamp < timestamp || endTimestamp == timestamp) {
					showToast(this.$t('lessEndDateTip'), 'none', 1000, false) //请选择小于结束日期
				} else {
					this.startTimestamp = timestamp
					this.startDate = e.detail.value
					this.currentPage = 1
					this.deviceStatusList = []
					this.mescroll.scrollTo(0, 300)
					this.mescroll.resetUpScroll()
				}
			},
			endDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/');
				const timestamp = (new Date(date).getTime() / 1000 + 1 * 24 * 60 * 60).toString();
				const startTimestamp = this.startTimestamp
				if (startTimestamp > timestamp || startTimestamp == timestamp) {
					showToast(this.$t('greaterStartDateTip'), 'none', 1000, false) //请选择大于开始日期
				} else {
					this.endTimestamp = timestamp
					this.endDate = e.detail.value
					this.currentPage = 1
					this.deviceStatusList = []
					this.mescroll.scrollTo(0, 300)
					this.mescroll.resetUpScroll()
				}
			},
			gotoDevice(item) {
				const component = storage.getDeviceNavigationComponent() || 'deviceInfo'
				uni.navigateTo({
					url: `/pages/deviceNavigation/deviceNavigation?deviceCore=${item.deviceCore}&component=${component}`
				})
			},
		},
		onShareAppMessage(res) {
			let deviceName = this.deviceName
			let deviceCore = this.deviceCore
			let nickName = storage.getNickName()
			let shortCompanyName = storage.getShortCompanyName()
			return {
				title: deviceName == null ? `${nickName}${this.$t('share')}${shortCompanyName}` :
					`${nickName}${this.$t('share')}${deviceName}`,
				path: deviceCore == null ? `/pages/deviceStatus/deviceStatus` :
					`/pages/deviceStatus/deviceStatus?deviceName=${deviceName}&deviceCore=${deviceCore}`,
				success: (res) => {
					// console.log(res)
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
